<template>
  <div class="sectorCapitalFlowDialog" @mouseover="stopAutoRefresh" @mouseleave="startAutoRefresh">
    <div class="tableHeader">
      <div>板块名称</div>
      <div>当日涨跌幅</div>
    </div>
    <table class="bankTable">
      <tr v-for="Bank in Banks" :key="Bank.scfName">
        <th>{{ Bank.scfName }}</th>
        <th>
          <div class="tableRate">
            {{ Bank.scfFlows }}
            <img class="rateArrow" :src="parseFloat(Bank.scfFlows) < 0 ? 'src/assets/arrow-down.png' : 'src/assets/arrow-up.png'" />
          </div>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

export default {
  name: 'sectorCapitalFlows',
  data() {
    return {
      Banks: [],
      intervalId: null // 用于保存定时器ID
    };
  },
  created() {
    this.getSixAll();
    this.startAutoRefresh(); // 启动自动刷新
  },
  methods: {
    getSixAll() {
      axios.get('http://127.0.0.1:8080/sectors').then((res) => {
        this.Banks = res.data.data;
        console.log(res.data.data);
      }).catch((err) => {
        console.error(err); // 捕获错误并打印出来，方便调试
      });
    },
    startAutoRefresh() {
      if (this.intervalId === null) {
        this.intervalId = setInterval(() => {
          this.getSixAll();
        }, 5000); // 每隔5秒刷新一次
      }
    },
    stopAutoRefresh() {
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }
  },
  mounted() {
    this.startAutoRefresh();
  },
  unmounted() {
    this.stopAutoRefresh();
  }
};
</script>

<style>
.sectorCapitalFlowDialog {
  width: 100%;
  height: 100%;
  font-size: smaller;
  height: 100%; /* 让容器高度自适应父级高度 */
  overflow-y: auto; /* 添加滚动条以便测试 */

}
.sectorCapitalFlowDialog::-webkit-scrollbar { 
  width: 0;  /* Safari 和 Chrome */
  height: 0; /* Safari 和 Chrome */
}

.tableHeader {
  width: 80%;
  height: 28px;
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  background-color: #f7f7f72f;
  color: white;
}

.bankTable {
  width: 80%;
  height: calc(100% - 60px);
  margin: 10px auto;
  border-collapse: collapse;
}

.bankTable th {
  background-color: #f7f7f72f;
  color: white;
}

.tableRate {
  display: flex;
  justify-items: center;
  color: dodgerblue;
}

.rateArrow {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
</style>
